<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>合盘结果</title>
    <meta name="description" content="合盘结果分享">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
    <script src="{$oss}/active/newyear/js/rem.js"></script>
    <link rel="stylesheet" href="/static/valentine/2021/css/common.css?v=21">
    <link rel="stylesheet" href="/static/valentine/2021/css/get_with_score.css?v=21">
    <script src="{$oss}active/seven/js/jquery-v2.1.1.min.js"></script>
    <script src="/static/valentine/2021/js/common.js?v=21"></script>
</head>
<body>
<div class="content-box">
    <div class="nav" style="visibility:visible;{if !$rn}display: none;{/if}">
        <div class="nav-box">
            <div class="bg-color" style="height: {$height/50 + 0.88}rem"></div>
            <div class="to-back common-js-to-native" data-target="local" data-link="back">
                <div class="img"></div>
            </div>
            <div class="title-name">{$title}</div>
            <div class="opreation share-btn">分享</div>
        </div>
    </div>
    <div class="top-box" {if $rn}style="padding-top: {$height/50 + 0.88}rem"{/if}>
        <div class="left-box avatar-box">
            <img onerror="onerror=null;src='{$oss}/avatar_default_2.png'"
                 src="{if strpos($result.avatar1,'http')=== false}{$oss}/{/if}{$result.avatar1}" class="left-img"
                 alt="">
            <p class="name">{$result.nickname1}</p>
        </div>
        <div class="with-icon"></div>
        <div class="right-box avatar-box">
            <img onerror="onerror=null;src='{$oss}/avatar_default_2.png'"
                 src="{if strpos($result.avatar2,'http')=== false}{$oss}/{/if}{$result.avatar2}" alt=""
                 class="right-img">
            <p class="name">{$result.nickname2}</p>
        </div>
        <div class="result-score">
            <div class="title1">发展潜力得分</div>
            <div class="with-score">{$total_score}</div>
            <div class="left1-box text-b">
                <p class="p1">{$data.harmoniousAndConflict[0]}%</p>
                <p class="p2">和谐</p>
            </div>
            <div class="progess-box">
                <div class="progess-left icon-af"></div>
                <div class="progess-right"></div>
            </div>
            <div class="right1-box text-b">
                <p class="p1">{$data.harmoniousAndConflict[1]}%</p>
                <p class="p2">冲突</p>
            </div>
        </div>
    </div>
    <div class="content-box">
        <div class="item">
            <div class="item-title">{$data.if_love_status==1?'今生有缘':'假如恋爱'}</div>
            <div class="item-value">{$data.if_love}</div>
        </div>
        {if $show_type==3}
        {if $rn}
        <div class="back-index common-js-to-native" data-target="link" data-link="{$index_url}"></div>
        {else}
        <a href="{$index_url}" class="back-index"></a>
        {/if}
        <br>
        {/if}
        <span class="hr"></span>
        <div class="item">
            <div class="item-title1 gx">最合适的关系</div>
            {foreach name="$data.relation" item="v"}
            <div class="item-option">
                <div class="name">{$v.name_cn}</div>
                <div class="progess-box">
                    <div class="progess-index" style="width:{$v.per*100}%"></div>
                </div>
                <div class="val">{:intval($v.per*100)}%</div>
            </div>
            {/foreach}
        </div>
        <span class="hr"></span>
        <div class="item">
            <div class="item-title1 gx">关系发展潜力</div>
            <div class="canvas-box">
                <div class="canvas-box-item">
                    <canvas id="capacity" width="300" height="300"></canvas>
                </div>
            </div>
            <div class="info-box"></div>
        </div>
        <span class="hr"></span>
        <div class="item">
            <div class="item-title1 gx">整体关系评价</div>
            <div class="lz-dian">立足点</div>
            {foreach name="$data.foothold" key="k" item="v"}
            <div class="lz-md-text">{$k+1}. {$v}</div>
            {/foreach}
            <div class="md-dian mt40">矛盾点</div>
            {foreach name="$data.conflict" key="k" item="v"}
            <div class="lz-md-text">{$k+1}. {$v}</div>
            {/foreach}
        </div>
        <span class="hr mt20 mb10"></span>
        <div class="item">
            <div class="item-title1 gx">双方在关系中的收获</div>
            <div class="relation-box">
                <canvas id="relation"></canvas>
            </div>
            <div class="relation-text-box">
                <div class="relation-option-box">
                    <div class="option-item active">成长</div>
                    <div class="option-item">物质</div>
                    <div class="option-item">关爱</div>
                    <div class="option-item">激励</div>
                    <div class="option-item">安全</div>
                    <div class="option-item">幸运</div>
                </div>
                <div class="relation-option-text">
                    <div class="text-item active">成长：在相处中可能获得的经验和知识，但有时也意味着承受的压力和约束。</div>
                    <div class="text-item">物质：金钱或利益往来。这里仅是潜在的可能性。</div>
                    <div class="text-item">关爱：得到对方的关心和爱护，但也有时候，只代表感受到对方的情绪，与对方有较为亲密的情感互动。</div>
                    <div class="text-item">激励：在相处中获得的引导和鼓励，会让人目标清晰，有时也会让人充满前进的力量。</div>
                    <div class="text-item">安全：获得情绪上的抚慰或内心需求的满足，自己觉得比较有安全感。但有些人天生欠缺安全感，比较难以被满足。</div>
                    <div class="text-item">幸运：得到机遇、帮助或某方面的好处（比如赠礼），有时也仅仅是相处时较为放松和开心。</div>
                </div>
            </div>
            <div class="user-box">
                <div class="user-item active" data-index="1">{$result.nickname2}</div>
                <div class="user-item" data-index="2">自己</div>
            </div>
        </div>
    </div>
    {if $show_type==3}
    <div class="footer">
        <div class="title">
            <span class="flag1"></span>
            快来查看你与{$result.nickname2}的恋爱走向！
        </div>
        <ul class="goods-list" {if !$rn}style="padding-bottom:1.2rem;"{/if}>
            <li class="list-item">
                <!--在APP内部访问时，使用m站地址跳转本地报告页面，否则跳转的wap站-->
                <a href="{if $rn}https://m.goddessxzns.com/synastry_report_list?srid=1&need_auth=1{else}https://xingzuonvshen.datasink.sensorsdata.cn/t/z{/if}"
                   target="_blank">
                    <img class="goods-bg" src="/static/valentine/2021/img/恋爱合盘报告.jpg" alt="">
                    <span class="goods-btn">点击查看></span>
                    <div class="goods-info">
                        <span>{$unlockNum1}已购买</span>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    {elseif $show_type==1 && !$rn}
    <!--二维码展示-->
    <div class="qrcode-box">
        <img class="img" src="/static/valentine/2021/img/2021七夕活动下载.png" alt="准了APP下载二维码图片">
        <div class="text">下载准了APP</div>
        <div class="text">体验合盘</div>
    </div>
    {/if}
    <div class="award-box" {if $is_show_coupon}style="display: block;"{/if}>
        <div class="award-box-shadow"></div>
        <div class="award-box-content">
            <div class="content-detail">
                <div class="img"></div>
                <div class="btn btn-close">稍后使用</div>
                <div class="btn btn-ok common-js-to-native" data-target="local" data-link="discount_coupon_center?need_auth=2">立即使用</div>
            </div>
        </div>
    </div>
    <!--邀请好友方式-->
    <div class="share-box" style="display: none;">
        <div class="share-box-shadow"></div>
        <div class="share-choice">
            <div class="title">分享到</div>
            <div class="share-list">
                <div class="list-item common-js-to-native-share"
                     data-title="{$share_title}" data-desc="{$share_des}" data-url="{$share_link}" data-platform="0">
                    <span class="weixin"></span>微信
                </div>
                <div class="list-item common-js-to-native-share"
                     data-title="{$share_title}" data-desc="{$share_des}" data-url="{$share_link}" data-platform="1">
                    <span class="weixin-timeline"></span>朋友圈
                </div>
                <div class="list-item common-js-to-native-share"
                     data-title="{$share_title}" data-desc="{$share_des}" data-url="{$share_link}" data-platform="3">
                    <span class="qq"></span>QQ好友
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var drawCanvas = {
        ctx: null,
        data: null,
        dom: null,
        isInit: false,// 是否初始化
        space1: 20,// 第一个前面距离，留空
        space2: 42,// 每一个间隔
        scale: 1,// 放大倍数
        startYear: 12,// 开始年份
        Years: 89,// 总岁数
        colors: ['#FFC952', '#FFE5B2'],// 曲线渐变颜色组
        curvData1: [],// 曲线绘制数据
        curvData2: [],// 曲线绘制数据
        sectionData: [],// 曲线分段进行区间判断
        points: [],
        direction: 1,// 横向 0  ，纵向 1
        fontFamily: 'serif',// 字体 arial Verdana serif Verdana
        // 计算分值在区间内的位置
        calcPerc: function (obj, n, max, min) {
            var s, lo, re, l = max - min;
            if (obj.direction) {
                s = 35;
                lo = $(obj.dom).parents('.curv-box').width() - s - 10;
                re = (n - min) / l * lo + s;
            } else {
                s = 35;
                lo = 155;
                re = (max - n) / l * lo + s;
            }
            return re;
        },
        // 绘制间隔线条
        drawLine: function (obj, x1, y1, x2, y2, lineWidth, strokeStyle) {
            // 绘制线
            obj.ctx.beginPath();
            // obj.ctx.setLineDash([5]);
            obj.ctx.moveTo(x1, y1);
            obj.ctx.lineTo(x2, y2);
            obj.ctx.lineWidth = lineWidth || 1;
            obj.ctx.strokeStyle = strokeStyle || '#EAEAEA';
            obj.ctx.stroke();
            obj.ctx.closePath();
        },
        // 绘制曲线
        drawCruvLine: function (obj, curvData, strokeStyle) {
            obj.ctx.beginPath();
            obj.ctx.setLineDash([]);
            obj.ctx.strokeStyle = strokeStyle;
            obj.ctx.globalAlpha = 1;
            obj.ctx.lineWidth = 3;
            var b = curvData[0], e;
            for (var i = 0; i < curvData.length - 1; i++) {
                // 三次贝塞尔曲线
                e = curvData[i + 1];
                if (i === 0) {
                    // 左侧线头
                    // obj.ctx.moveTo(b.x - obj.space1, b.y);
                    obj.ctx.moveTo(b.x, b.y);
                } else {
                    obj.ctx.moveTo(b.x, b.y);
                }
                var c, c1, c2;
                c = (curvData[i].x + curvData[i + 1].x) / 2;
                c1 = {x: c, y: b.y};
                c2 = {x: c, y: e.y};// 横向
                // 右侧线头
                // if (i === obj.curvData.length - 2) e.x += obj.space1;
                obj.ctx.bezierCurveTo(c1.x, c1.y, c2.x, c2.y, e.x, e.y);
                // 下一个起点 为当前结束点
                b = e;
            }
            obj.ctx.stroke();
            obj.ctx.closePath();
        },
        // 绘制重点标记
        drawPoint: function (obj, pointData, fillStyle) {
            var x = pointData.x, y = pointData.y;
            obj.ctx.beginPath();
            obj.ctx.moveTo(x, y);
            obj.ctx.globalAlpha = 1;
            obj.ctx.arc(x, y, 6, 0, 2 * Math.PI, true);
            obj.ctx.closePath();
            // 最高点和最低点的
            obj.ctx.fillStyle = fillStyle;
            obj.ctx.fill();
            obj.ctx.beginPath();
            obj.ctx.moveTo(x, y);
            obj.ctx.globalAlpha = 1;
            obj.ctx.arc(x, y, 4, 0, 2 * Math.PI, true);
            obj.ctx.closePath();
            obj.ctx.fillStyle = '#fff';
            obj.ctx.fill();
        },
        // 绘制文字
        drawText: function (obj, str, x, y, font, fillStyle) {
            obj.ctx.beginPath();
            obj.ctx.font = font || '10px ' + obj.fontFamily;
            obj.ctx.fillStyle = fillStyle || '#6747F5';
            obj.ctx.fillText(str, x, y);
            obj.ctx.closePath();
        },
        // 将数据进行分区段处理，每10个分成一段，并计算出区段的最大值和最小值
        getSectionData: function (obj) {
            var arr = obj.data, total = Math.ceil(arr.length / 10);
            for (var i = 0; i < total; i++) {
                var t = arr.splice(0, 10),
                    max = Math.max.apply(null, t),
                    min = Math.min.apply(null, t),
                    arrTmp = {
                        data: t,
                        max: max,
                        min: min,
                    };
                obj.sectionData.push(arrTmp);
            }
        },
        initload: function (id, data, flag, index, sorts) {
            var obj = this;//, max, min
            obj.dom = document.getElementById(id);
            obj.canvasWidth = $(obj.dom).parent().width();
            obj.canvasHeight = obj.canvasWidth / 1.6;
            obj.ctx = document.getElementById(id).getContext("2d");
            obj.data = data;// 初始化曲线绘制数据
            obj.sorts = sorts; // 顺序

            obj.dom.setAttribute('width', obj.canvasWidth + 'px'); // 设置画布宽度
            obj.dom.setAttribute('height', obj.canvasHeight + 'px'); // 设置画布高度
            obj.ctx.scale(obj.scale, obj.scale);
            this.draws(flag, index)
            this.isInit = true;
        },
        draws: function (flag, index) {
            this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);// 清空画布
            this.ctx.lineJoin = 'round';// 线条圆滑
            this.ctx.lineCap = 'round';
            this.ctx.textAlign = 'left';

            var leftX = this.canvasWidth / 670 * 95;
            var rigthX = this.canvasWidth / 670 * 640;
            var textX = this.canvasWidth / 670 * 30;
            var StarPiointY = this.canvasHeight * 23 / 24,
                baseY = this.canvasHeight * 5 / 6 / 100;
            for (var i = 0; i < 6; i++) {
                var y = this.canvasHeight * (3 + 4 * i) / 24
                this.drawLine(this, leftX, y, rigthX, y, 2, '#F2E8EB');
                this.drawText(this, 100 - i * 20, textX, y + this.canvasWidth / 670 * 10, '30px serif', '#66434A');
                var piointX = this.canvasWidth / 670 * (138 + i * 92);
                if (!this.isInit) {
                    this.curvData1.push({
                        'x': piointX,
                        'y': StarPiointY - baseY * this.data['score1'][this.sorts[i]]
                    });
                    this.curvData2.push({
                        'x': piointX,
                        'y': StarPiointY - baseY * this.data['score2'][this.sorts[i]]
                    });
                }
            }
            // 画自己的曲线
            this.drawCruvLine(this, this.curvData1, '#6194FA');
            // 画对方的曲线
            this.drawCruvLine(this, this.curvData2, '#F6819F');

            this.ctx.textAlign = 'center';
            if (flag == 1) {
                this.drawPoint(this, this.curvData1[index], '#6194FA');
                this.drawText(this, this.data['score1'][this.sorts[index]], this.curvData1[index]['x'], this.curvData1[index]['y'] - this.canvasWidth / 670 * 20, '30px serif', '#6194FA');
            } else {
                this.drawPoint(this, this.curvData2[index], '#F6819F');
                this.drawText(this, this.data['score2'][this.sorts[index]], this.curvData2[index]['x'], this.curvData2[index]['y'] - this.canvasWidth / 670 * 20, '30px serif', '#F6819F');
            }
        }
    };
    // flag=1 表示user-B  flag=2 表示user-B
    var flag = 1;
    drawCanvas.initload('relation', {
            'score1': JSON.parse('{:json_encode($data.score1)}'),
            'score2': JSON.parse('{:json_encode($data.score2)}')
        },
        flag, 0, ['grow', 'substance', 'care', 'motivate', 'relieved', 'luck']
    );
    // user-B与user-A 切换
    $('.user-box .user-item').click(function () {
        flag = $(this).data('index');
        var index = $('.relation-option-box .option-item.active').index();
        drawCanvas.draws(flag, index);
        $(this).addClass('active').siblings().removeClass('active');
    })
    $('.content-box .item .relation-text-box .relation-option-box .option-item').click(function () {
        var index = $(this).index();
        $(this).addClass('active').siblings().removeClass('active');
        $('.content-box .item .relation-text-box .relation-option-text .text-item').removeClass('active').eq(index).addClass('active');
        drawCanvas.draws(flag, index);
    })

    $('.award-box-content .btn-close').click(function () {
        $('.award-box').remove();
    })

</script>
<script type="text/javascript">
    var radarCanvas = {
        ctx: null,
        dom: null,
        data: null,
        colors: {
            // 文字颜色
            textColor: '#7F8698',
            // 圆圈颜色
            circleColor: '#E3E3E3',
            // 区域描边颜色
            borderColor: '#AFD3FF',
            // 区域填充颜色
            areaColor: '#AFD3FF',
        },
        fontSize: 14,// 文字字体大小
        wholeScale: 4,// 画布缩放比例
        firstScale: 0.7,// 最外圈半径占画布半径的比例
        // 设置配置
        setConfig: function (option) {
            this.dom = document.getElementById(option.id);
            this.ctx = this.dom.getContext("2d");
            this.data = option.data;
            this.colors = option.colors;
            this.fontSize = option.fontSize ? option.fontSize : 14;
            this.wholeScale = option.wholeScale ? option.wholeScale : 4;
            this.firstScale = option.firstScale ? option.firstScale : 0.7;

            return this;
        },
        /**
         * 获取点的坐标
         * @param cx 中心点横坐标
         * @param cy 中心点纵坐标
         * @param r 半径
         * @param angle 角度
         */
        getPoint: function (cx, cy, r, angle) {
            var x = -r * Math.cos(Math.PI / 180 * angle) + cx;
            var y = -r * Math.sin(Math.PI / 180 * angle) + cy;
            return {x: x, y: y};
        },
        // 画圆
        drawCircle: function (x, y, cx, cy, r, strokeColor, filleColor) {
            this.ctx.beginPath();
            if (x && y) {
                this.ctx.moveTo(x, y);
            }
            this.ctx.arc(cx, cy, r, 0, 2 * Math.PI, true);
            if (strokeColor) {
                this.ctx.strokeStyle = strokeColor;
                this.ctx.stroke();
            }
            if (filleColor) {
                this.ctx.fillStyle = filleColor;
                this.ctx.globalAlpha = 1;
                this.ctx.fill();
            }
            this.ctx.closePath();
            return this;
        },
        // 绘制文字
        drawText: function (power, color, x, y, font_size) {
            this.ctx.beginPath();
            this.ctx.font = (font_size / 414 * canvas) + 'px Arial';
            this.ctx.fillStyle = color;
            this.ctx.globalAlpha = 1;
            this.ctx.fillText(power, x, y);
            this.ctx.closePath();
        },
        // 绘制线条
        drawLine: function (x1, y1, x2, y2, strokeColor, filleColor) {
            this.ctx.beginPath();
            if (x1 && y1) {
                this.ctx.moveTo(x1, y1);
            }
            this.ctx.lineTo(x2, y2);
            if (strokeColor) {
                this.ctx.strokeStyle = strokeColor;
                this.ctx.stroke();
            }
            if (filleColor) {
                this.ctx.fillStyle = filleColor;
                this.ctx.globalAlpha = 1;
                this.ctx.fill();
            }
            this.ctx.closePath();
        },
        // 绘制分数区域
        drawArea: function () {

        },
        // 开始绘制
        draw: function (option) {
            var thisObj = this.setConfig(option);
            var canvasWidth = $(thisObj.dom).parent().width();
            var cx = canvasWidth / 2,// 中心点
                r1 = cx * thisObj.firstScale,
                r2 = r1 * 0.7,
                r3 = r1 + cx * 0.05,
                itemNum = thisObj.data.length,
                changeAngle = 360 / itemNum,
                startAngle = 0,
                fontSize = thisObj.fontSize * thisObj.wholeScale / 2,
                max = 100,
                min = 0,
                total = max - min;
            // 设置缩放 处理移动端虚化的问题
            thisObj.ctx.scale(thisObj.wholeScale, thisObj.wholeScale);
            // 设置canvas画布宽高 为4倍父级宽度
            thisObj.dom.setAttribute('width', canvasWidth);
            thisObj.dom.setAttribute('height', canvasWidth);
            // 设置画笔全局属性
            thisObj.ctx.lineWidth = this.wholeScale;
            thisObj.ctx.font = fontSize + 'px Arial';

            // 最外圈
            thisObj.drawCircle(cx + r1, cx, cx, cx, r1, thisObj.colors.circleColor);
            // 第二圈 虚线圈
            // thisObj.drawCircle(cx + r2, cx, cx, cx, r2, thisObj.colors.circleColor);
            // 第二圈 虚线圈
            thisObj.ctx.beginPath();
            thisObj.ctx.moveTo(cx + r2, cx);
            thisObj.ctx.arc(cx, cx, r2, 0, 2 * Math.PI, true);
            thisObj.ctx.strokeStyle = thisObj.colors.circleColor;
            thisObj.ctx.setLineDash([thisObj.wholeScale * thisObj.wholeScale, thisObj.wholeScale * thisObj.wholeScale]);
            thisObj.ctx.stroke();
            thisObj.ctx.closePath();
            // 绘制外圈文字
            for (var i = 0; i < itemNum; i++) {
                var xy = thisObj.getPoint(cx, cx, r3, startAngle), halfFont = fontSize / 2;
                // 最左边的右侧对其对齐
                if (startAngle === 0) {
                    xy.y += halfFont;
                    thisObj.ctx.textAlign = 'right';
                } else if (startAngle > 0 && startAngle < 90) {
                    xy.x -= halfFont;
                    xy.y -= halfFont;
                    thisObj.ctx.textAlign = 'center';
                } else if (startAngle === 90) {
                    xy.y -= halfFont;
                    thisObj.ctx.textAlign = 'center';
                } else if (startAngle > 90 && startAngle < 180) {
                    xy.x += halfFont;
                    xy.y -= halfFont;
                    thisObj.ctx.textAlign = 'center';
                } else if (startAngle === 180) {
                    xy.y += halfFont;
                    thisObj.ctx.textAlign = 'left';
                } else if (startAngle > 180 && startAngle < 270) {
                    xy.x += fontSize;
                    xy.y += fontSize;
                    thisObj.ctx.textAlign = 'center';
                } else if (startAngle === 270) {
                    xy.y += fontSize;
                    thisObj.ctx.textAlign = 'center';
                } else if (startAngle > 270 && startAngle < 360) {
                    xy.x -= halfFont;
                    xy.y += fontSize;
                    thisObj.ctx.textAlign = 'center';
                }
                // 绘制文字在外圆外部
                thisObj.ctx.beginPath();
                thisObj.ctx.fillStyle = thisObj.colors.textColor;
                thisObj.ctx.globalAlpha = 1;
                thisObj.ctx.fillText(thisObj.data[i].text, xy.x, xy.y);
                thisObj.ctx.closePath();

                // 绘制分割线
                if (i < itemNum / 2) {
                    var xy1 = thisObj.getPoint(cx, cx, r1, startAngle),
                        crossAngle = startAngle > 180 ? (startAngle - 180) : (startAngle + 180),
                        xy2 = thisObj.getPoint(cx, cx, r1, crossAngle);
                    thisObj.ctx.beginPath();
                    thisObj.ctx.moveTo(xy1.x, xy1.y);
                    thisObj.ctx.lineTo(xy2.x, xy2.y);
                    thisObj.ctx.setLineDash([]);
                    thisObj.ctx.strokeStyle = thisObj.colors.circleColor;
                    thisObj.ctx.globalAlpha = 1;
                    thisObj.ctx.stroke();
                    thisObj.ctx.closePath();
                }
                startAngle += changeAngle;
            }
            // 绘制分数区域
            startAngle = 0;
            var areaLineWidth = thisObj.wholeScale * 2,
                score0 = thisObj.data[0].sort,
                r4 = (score0 > max ? max : (score0 < 2 ? 2 : score0)) / total * r1 - areaLineWidth,
                scoreXyStart = thisObj.getPoint(cx, cx, r4, startAngle);

            thisObj.ctx.beginPath();
            // 画笔移动到起点
            thisObj.ctx.moveTo(scoreXyStart.x, scoreXyStart.y);
            for (var j = 1; j < itemNum; j++) {
                startAngle += changeAngle;
                var newScore = thisObj.data[j].sort;
                newScore = newScore > max ? max : (newScore < 2 ? 2 : newScore);
                r4 = (newScore) / total * r1 - areaLineWidth;
                var scoreXy = thisObj.getPoint(cx, cx, r4, startAngle);
                if (j === itemNum - 1) {
                    thisObj.ctx.lineTo(scoreXy.x, scoreXy.y);
                    thisObj.ctx.lineTo(scoreXyStart.x, scoreXyStart.y);
                } else {
                    thisObj.ctx.lineTo(scoreXy.x, scoreXy.y);
                }
            }
            thisObj.ctx.setLineDash([]);
            thisObj.ctx.lineWidth = areaLineWidth;
            thisObj.ctx.strokeStyle = thisObj.colors.borderColor;
            thisObj.ctx.stroke();
            thisObj.ctx.fillStyle = thisObj.colors.areaColor;
            thisObj.ctx.globalAlpha = 0.7;
            thisObj.ctx.fill();
            thisObj.ctx.closePath();
        }
    };

    var capacityData = JSON.parse('{:json_encode($data.score)}');
    var capacityTxt = {
        'attract': '吸引',
        'chat': '沟通',
        'passion': '激情',
        'benefit': '亲密',
        'happy': '愉悦',
        'probTobeLover': '缘分',
    }

    var resData = [];
    var strIt = '';
    $.each(capacityData, function (k, v) {
        resData.push({
            'text': capacityTxt[k],
            'sort': v.num
        });

        var scoreState = v.num > 75 ? ' highlight' : '';

        strIt += '<div class="info-item">\n' +
            '    <div class="score' + scoreState + '">' + v.num + '</div>\n' +
            '    <div class="name">' + capacityTxt[k] + '</div>\n' +
            '    <div class="desc">' + v.text + '</div>\n' +
            '</div>'
    })

    $('.content-box .item .info-box').html(strIt);

    var option = {
        id: 'capacity',
        data: resData,
        colors: {
            textColor: '#494949',// 文字颜色
            circleColor: '#f3ebed',// 圆圈颜色
            // borderColor: '#ffdbe3',// 区域描边颜色
            borderColor: '#FFBDCD',// 区域描边颜色
            areaColor: '#fff6f5',// 区域填充颜色
        }
    }

    radarCanvas.draw(option);
</script>
{include file="../apps/web/view/public/sensors.html" /}
<script>
    var cnzz_s_tag = document.createElement('script');
    cnzz_s_tag.type = 'text/javascript';
    cnzz_s_tag.async = true;
    cnzz_s_tag.charset = 'utf-8';
    cnzz_s_tag.src = 'https://w.cnzz.com/c.php?id=1279195343&async=1';
    var root_s = document.getElementsByTagName('script')[0];
    root_s.parentNode.insertBefore(cnzz_s_tag, root_s);
</script>
</html>
